<template>
    <div class="v-shop-flex-container">
        <ProductList :shopCartListData="products"></ProductList>
        <ShoppingCart></ShoppingCart>
    </div>
</template>

<script>
    import ProductList from './ProductList.vue';
    import ShoppingCart from './ShoppingCart.vue';
    import { mapGetters, mapActions } from 'vuex'
    export default {
        name:'shop',
        data() {
            return {
               x:100,
               y:200
            }
        },
        computed:mapGetters('products',{
          products:'allProducts',
        }),
        created () {
            this.$store.dispatch('products/getAllProducts')
        },
        mounted() {  
            //定义类
            class Point {
                constructor(x, y) {
                    this.x = x;
                    this.y = y;
                }

                toString() {
                    return '(' + this.x + ', ' + this.y + ')';
                }
            }
            let point = new Point(100,200)
            console.log('point',point.toString())
        },
        methods:mapActions('cart',{
          addProductToCart:'addProductToCart'
        }),
        components:{
            ProductList,
            ShoppingCart
        }
    }
</script>

<style lang="scss">
    .v-shop-flex-container{
        height: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        .v-shop-felx-item:first-child{
            -webkit-box-flex: 1;
            -ms-flex-positive: 1;
            flex-grow: 1;
            -ms-flex-negative: 1;
            flex-shrink: 1;
            overflow-y: auto;
        }
        .v-shop-felx-item:last-child{
            -webkit-box-flex: 0;
            -ms-flex-positive: 0;
            flex-grow: 0;
            -ms-flex-negative: 0;
            flex-shrink: 0;
        }
    }
</style>